<!-- 操作记录详情弹窗 -->
<template>
  <el-dialog
    custom-class="operateRecordDialog"
    append-to-body
    :close-on-click-modal="false"
    title="备料单操作记录"
    :visible.sync="operateRecordDialog.visible"
    v-if="operateRecordDialog.visible"
    width="80%"
    top="7vh"
    @close="close()"
  >
    <avue-crud
      ref="packBoxTableCrud"
      v-model="operateRecordDialog.form"
      :page.sync="operateRecordDialog.page"
      :option="operateRecordDialog.option"
      :table-loading="operateRecordDialog.loading"
      :data="operateRecordDialog.data"
      @current-change="currentChange"
      @size-change="sizeChange"
    >
    </avue-crud>
  </el-dialog>
</template>

<script>
import { getOperationPageList } from '@/api/warehouse/preMaterialList';

export default {
  name: 'operateRecordDialog',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      sheetHeaderId: null,
      operateRecordDialog: {
        visible: false,
        loading: false,
        data: [],
        form: {},
        page: {
          pageSize: 20,
          currentPage: 1,
          total: 0
        },
        option: {
          tip: false,
          searchShow: true,
          searchSpan: 4,
          searchMenuSpan: 6,
          dialogClickModal: false,
          height: '500',
          border: true,
          addBtn: false,
          editBtn: false,
          viewBtn: false,
          cancelBtn: false,
          saveBtn: false,
          selection: false,
          menu: false,
          page: true,
          index: true,
          indexLabel: '序号',
          refreshBtn: false,
          expandBtn: false,
          columnBtn: false,
          column: [
            {
              label: '操作时间',
              prop: 'createTime',
              width: 180
            },
            {
              label: '操作人',
              prop: 'createUserName',
              width: 100
            },
            {
              label: '操作模块（列表按钮）',
              prop: 'operationTypeName',
              width: 180
            },
            {
              label: '操作内容',
              prop: 'operationCause',
              overHidden: true
            }
          ]
        }
      }
    };
  },
  watch: {
    visible: {
      handler(value) {
        this.operateRecordDialog.visible = value;
      }
    }
  },
  methods: {
    getData(id) {
      this.sheetHeaderId = id;
      this.operateRecordDialog.loading = true;
      getOperationPageList(this.operateRecordDialog.page.currentPage, this.operateRecordDialog.page.pageSize, id)
        .then((res) => {
          const data = res.data.data;
          this.operateRecordDialog.data = data.records;
          this.operateRecordDialog.page.total = data.total;
        })
        .finally(() => {
          this.operateRecordDialog.loading = false;
        });
    },
    currentChange(currentPage) {
      this.operateRecordDialog.page.currentPage = currentPage;
      this.getData(this.sheetHeaderId);
    },
    sizeChange(pageSize) {
      this.operateRecordDialog.page.pageSize = pageSize;
      this.getData(this.sheetHeaderId);
    },
    close() {
      this.operateRecordDialog.visible = false;
      this.$emit('closeDialog');
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .operateRecordDialog {
  .avue-crud__menu {
    display: none;
  }
  .ruleRowForm {
    margin-bottom: 5px;
    .el-radio {
      margin-right: 10px;
    }
    .header-icon {
      margin-right: 10px;
    }
  }
}
</style>
